'use client'

import { useState, useEffect } from 'react'
import { Sheet, User } from '@/types/sheet'
import { UnifiedSpreadsheetEditor } from '@/components/sheet/UnifiedSpreadsheetEditor'
import { ShareModal } from '@/components/sheet/ShareModal'
import { useAuth } from '@/contexts/AuthContext'
import { FileSpreadsheet } from 'lucide-react'

interface HomePageProps {
  onCreateSheet: () => void
}

export const HomePage: React.FC<HomePageProps> = ({ onCreateSheet }) => {
  const { user } = useAuth()
  const [selectedSheet, setSelectedSheet] = useState<Sheet | null>(null)
  const [showShareModal, setShowShareModal] = useState(false)

  // 处理单元格更新
  const handleCellUpdate = (row: number, column: number, value: string, formula?: string) => {
    console.log('Cell updated:', { row, column, value, formula })
  }

  // 处理样式更新
  const handleStyleUpdate = (row: number, column: number, style: any) => {
    console.log('Style updated:', { row, column, style })
  }

  // 处理保存
  const handleSave = (cells: any[]) => {
    console.log('Save cells:', cells)
  }

  return (
    <div className="flex-1 flex flex-col">
      {selectedSheet ? (
        <div className="flex-1">
          <UnifiedSpreadsheetEditor
            sheet={selectedSheet}
            onCellUpdate={handleCellUpdate}
            onStyleUpdate={handleStyleUpdate}
            onSave={handleSave}
            containerId="home-univer-container"
            showCollaboration={true}
            allowEdit={true}
          />
        </div>
      ) : (
        <div className="flex-1 flex items-center justify-center">
          <div className="text-center">
            <FileSpreadsheet size={64} className="mx-auto text-gray-400 mb-4" />
            <h3 className="text-lg font-medium text-gray-900 dark:text-white mb-2">
              选择一个表格开始协作
            </h3>
            <p className="text-gray-500 dark:text-gray-400 mb-4">
              从左侧选择一个表格，或创建一个新的表格
            </p>
            <button
              onClick={onCreateSheet}
              className="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors"
            >
              创建新表格
            </button>
          </div>
        </div>
      )}

      {/* 分享模态框 */}
      {showShareModal && selectedSheet && (
        <ShareModal
          sheet={selectedSheet}
          onClose={() => setShowShareModal(false)}
        />
      )}
    </div>
  )
}
